import icons from './icons'

export default {
  data() {
    return {
      value: undefined,
    }
  },
  props: {
    disabled: {
      type: Boolean,
      required: false
    },
  },
  methods: {
    handleChange(e) {
      this.value = e;
      this.$emit('change', e)
    },
    clear() {
      this.value = undefined
    }
  },
  render() {
    const select = icons.map((item, index) => {
      return (
        <a-select-opt-group>
          <span slot="label">{item.title}</span>
          {
            item.icons.map((cItem, cIndex) => {
              return (
                <a-select-option value={cItem}>
                  <a-icon type={cItem} />
                  <span style='margin-left: 5px'>{cItem}</span>
                </a-select-option>
              )
            })
          }
        </a-select-opt-group>
      )
    })
    return (
      <a-select value={this.value} disabled={this.disabled} allowClear onChange={this.handleChange}>
        { select }
      </a-select>
      )
  }
}